// 从 vue-router 库中导入 createRouter 和 createWebHistory 函数
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// 导入首页组件
import Home from '../views/Home.vue'
// 导入待办详情组件
import TodoDetail from '../views/TodoDetail.vue'
// 导入添加待办组件
import AddTodo from '../views/AddTodo.vue'

// 定义路由配置数组
const routes: RouteRecordRaw[] = [
  {
    // 路径为根路径
    path: '/',
    // 路由名称为 Home
    name: 'Home',
    // 对应的组件为 Home 组件
    component: Home
  },
  {
    // 路径为 /todo/:id，:id 为动态参数
    path: '/todo/:id',
    // 路由名称为 TodoDetail
    name: 'TodoDetail',
    // 对应的组件为 TodoDetail 组件
    component: TodoDetail
  },
  {
    // 路径为 /add
    path: '/add',
    // 路由名称为 AddTodo
    name: 'AddTodo',
    // 对应的组件为 AddTodo 组件
    component: AddTodo
  }
]

// 使用 createRouter 函数创建路由实例
const router = createRouter({
  // 使用 HTML5 History 模式
  history: createWebHistory(),
  // 路由配置数组
  routes
})

// 导出路由实例
export default router